<template>
  <div class="createPost-container">
    <el-form v-loading="loading" class="form-container" :model="postForm" :rules="rules" ref="postForm">
      <sticky className="sub-navbar published" v-if="isEdit" >
				<el-checkbox v-model="postForm.isTop" class="el-button" border>置顶</el-checkbox>
				<el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm()">保存发布</el-button>
				<!-- <el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button> -->
      </sticky>

      <div class="createPost-main-container">
        <el-row>
          <el-col :span="21">
            <el-form-item style="margin-bottom: 40px;" prop="title">
              <MDinput name="name" v-model="postForm.title" required :readonly="!isEdit" :maxlength="100" >
                标题
              </MDinput>
              <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <!-- <el-upload class="upload-demo" :multiple="false"
                :action="uploadUrl"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList2"
                :limit="1"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload> -->
            </el-form-item>
          </el-col>
        </el-row>
        <div class="editor-container">
          <!-- <el-input type="textarea" :autosize="{ minRows: 20 }" placeholder="请输入内容" v-model="postForm.content" :readonly="!isEdit" ></el-input> -->
          <editor v-model="postForm.content" :init='init' v-if="isEdit" ></editor>
          <div v-html='postForm.content' v-if="!isEdit"></div>
        </div>
      </div>
    </el-form>

  </div>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .title-prompt{
    position: absolute;
    right: 0px;
    font-size: 12px;
    top:10px;
    color:#ff4949;
  }
  .createPost-container {
    position: relative;
    .createPost-main-container {
      padding: 40px 45px 20px 50px;
      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;
        .postInfo-container-item {
          float: left;
        }
      }
      .editor-container {
        min-height: 500px;
        margin: 0 0 30px;
        .editor-upload-btn-container {
            text-align: right;
            margin-right: 10px;
            .editor-upload-btn {
                display: inline-block;
            }
        }
      }
    }
    .word-counter {
      width: 40px;
      position: absolute;
      right: -10px;
      top: 0px;
    }
  }
</style>

<script>
import Sticky from '@/components/Sticky' // 粘性header组件
import MDinput from '@/components/MDinput'
import { Save, GetDetail } from '@/api/notice'

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/fullscreen'
import './youku'

export default {
  name: 'editNoice',
  components: {
    Sticky,
    MDinput,
    Editor: Editor
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    noice: {
      type: Object,
      default: 0
    }
  },
  watch: {
    noice: {
      immediate: true,
      handler(newVal) {
        this.postForm = newVal
        // this.getDetailById(newVal)
      }
    }
  },
  data() {
    var baseServer = process.env.BASE_API.replace('/api', '')
    const upurl = `${baseServer}/UploadFiles`
    return {
      init: {
        language_url: '/static/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/lightgray',
        height: 300,
        plugins: 'link lists code image table colorpicker textcolor wordcount contextmenu fullscreen youku',
        toolbar:
          'bold italic underline strikethrough | fontsizeselect forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image youku code | removeformat fullscreen',
        branding: false
      },
      loading: false,
      postForm: {
        id: 0,
        title: '',
        isTop: false,
        content: ''
      },
      rules: {
        title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        content: [{ required: true, trigger: 'blur', message: '请输入内容' }]
      },
      uploadUrl: upurl,
      imageUrl: '',
      baseServer: baseServer
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    submitForm() {
      var _this = this
      _this.$refs.postForm.validate(valid => {
        if (valid) {
          _this.loading = true
          Save(_this.postForm).then(result => {
            _this.$message.success('保存发布成功')
            _this.postForm.id = result.data
            _this.$emit('createPublishSuccessed', result)
            _this.loading = false
          }).catch(response => {
            _this.loading = false
          })
        }
      })
    },
    getDetailById(id) {
      var _this = this
      GetDetail({ id }).then(result => {
        _this.postForm = result
      })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = `${this.baseServer}/${res.result.webPath}`
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    /* width: 178px;
    height: 178px;
    line-height: 178px; */
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
